<template>
	<div class="todo-list">
		<van-sticky>
			<component
				:is="datePicker"
				v-model="state.date"
			/>
		</van-sticky>

		<van-tabs v-model:active="tabState.active" animated sticky swipeable @change="onTabChange" :offset-top="56">
			<van-tab v-for="item in tabState.list" :title="item.title" :name="item.value" :key="item.value">
				<van-pull-refresh v-model="state.refresh" @refresh="onRefresh">
					<van-list
						:loading="state.loading"
						:finished="state.finished"
						:finished-text="state.list?.length !== 0 ? '———— 已经到底了哦 ————' : '' "
						@load="getList"
					>
						<div class="lists" v-if="state.list?.length">
							<component
								:is="todoItem"
								v-for="item in state?.list"
								:key="item.id"
								:details="item"
								:active="+tabState.active"
							/>
						</div>
						<component
							:is="empty"
							v-if="!state.list?.length && !state.loading"
						/>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup>
import { dangerTodo, dangerDone } from '@/service/village'
import todoItem from './components/todoItem'
import { reactive, nextTick, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import empty from '@/components/empty'
import { useLoginStore } from '@/store/index'
import { storeToRefs } from 'pinia'
import datePicker from '@/components/datePicker'

const route = useRoute()
const router = useRouter()
const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)

const tabState = reactive({
	active: 1,
	list: [
		{ title: '待督办', value: 1 },
		{ title: '待复核', value: 2 },
		{ title: '复核通过', value: 3 }
	]
})

const state = reactive({
	date: [],
	list: [],
	page: 1,
	pageSize: 10,
	total: 0,
	refresh: false,
	loading: false,
	finished: false
})


const onTabChange = () => {
	router.replace({
		name: route.name,
		query: {
			active: tabState.active
		}
	})
	onRefresh()
}

const onRefresh = () => {
	state.list = []
	state.page = 1
	state.refresh = false
	state.loading = false
	state.finished = true
	nextTick(() => {
		state.finished = false
	})
}

const getList = async () => {
	const params = {
		pageindex: state.page -  1,
		limit: state.pageSize,
		checktime: state.date
	}
	try {
		state.loading = true
		const result = +tabState.active === 1
			? await dangerTodo(params)
			: await dangerDone({
				...params,
				jczt: String(tabState.active - 1)
			})
		state.loading = false

		tabState.list[0].title = `待督办(${result?.data?.dcl || 0})`
		tabState.list[1].title = `待复核(${result?.data?.dfh || 0})`
		tabState.list[2].title = `复核通过(${result?.data?.fhtg || 0})`

		state.list = [...state.list, ...result.data.items]
		state.total = result.data.total
		if (state.page * state.pageSize >= state.total) {
			state.finished = true
		}
		state.page++
	} catch (err) {
		state.loading = false
		state.finished = true
	}
}

watch(() => state.date, () => {
	onRefresh()
}, { deep: true })

onMounted(() => {
	tabState.active = +route.query?.active || 1
})
</script>

<style scoped lang="less">
.todo-list {
	:deep(.date-picker) {
		border-radius: 8px;
		padding: 24px 32px;
		.date {
			background: #F6F7F8;
			border-radius: 16px;
		}
	}
}
</style>
